<template>
  <div :style="{ width: '100%', height: '100%' }">
    <div @click="goBackClick" :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginTop: (28 / 96) + 'rem', marginLeft: (28 / 96) + 'rem', marginBottom: (35 / 96) + 'rem', cursor: 'pointer' }">
      <div :style="{ width: (37 / 96) + 'rem', height: (49 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: (4 / 96) + 'rem' }">
        <img style="width: 100%; height: 100%;" src="../../../static/back.png" />
      </div>
      <span :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem', cursor: 'pointer' }">返回</span>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginBottom: (12 / 96) + 'rem' }">
      <span :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">邮箱账号绑定</span>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginBottom: (15 / 96) + 'rem' }">
      <div :style="{ width: '97.68%', height: (1 / 96) + 'rem', background: '#EEEEEE', }"></div>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
      <div :style="{ width: (572 / 96) + 'rem', height: (94 / 96) + 'rem', border: (1 / 96) + 'rem solid #6168FE', borderRadius: (12 / 96) + 'rem', marginBottom: (36 / 96) + 'rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (30 / 96) + 'rem', marginLeft: (18 / 96) + 'rem', marginRight: (18 / 96) + 'rem' }">绑定邮箱账号后，可直接用邮箱登录。</span>
      </div>
      <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (24 / 96) + 'rem' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">&nbsp;&nbsp;邮箱</span>
        <div :style="{ width: (427 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#EEEEEE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', marginLeft: (29 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
          <input :style="{ width: (279 / 96) + 'rem', height: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', marginLeft: (34 / 96) + 'rem', marginRight: (34 / 96) + 'rem' }" placeholder="输入邮箱账号" v-model="email" />
        </div>
      </div>
      <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (41 / 96) + 'rem' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">验证码</span>
        <div :style="{ width: (258 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#EEEEEE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', marginLeft: (29 / 96) + 'rem', marginRight: (7 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
          <input :style="{ width: (190 / 96) + 'rem', height: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', marginLeft: (34 / 96) + 'rem', marginRight: (34 / 96) + 'rem' }" placeholder="输入验证码" v-model="vfcode" />
        </div>
        <vf-code :valueText="email" :valueType="2" :valueMsg="emailMsg"></vf-code>
      </div>
      <div @click="bindEmailClick" :style="{ width: (185 / 96) + 'rem', height: (42 / 96) + 'rem', background: '#6168FE', borderRadius: (19 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <span :style="{ fontSize: (26 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FEFEFE', lineHeight: (24 / 96) + 'rem' }">确定绑定</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {pageResize} from '../../utils/resetScreenSize.js'
  import commonUtil from '../../utils/common.js'
  import VfCode from '../../components/VfCode'
  export default {
    name: 'BindEmail',
    components: {
      VfCode: VfCode
    },
    data() {
      return {
        email: "",
        vfcode: "",
        emailMsg: "邮箱帐号不正确",
        vfcodeMsg: "请输入验证码"
      }
    },
    mounted() {
      pageResize();
    },
    beforeDestroy() {
      window.document.title = '账号安全';
    },
    methods: {
      goBackClick() {
        this.$router.back();
      },
      bindEmailClick() {
        if(!commonUtil.checkEmail(commonUtil.trim(this.email))) {
          this.$toast(this.emailMsg);
          return;
        }
        if(!commonUtil.trim(this.vfcode)) {
          this.$toast(this.vfcodeMsg);
          return;
        }
        // 接口调用
      }
    },
    activated () {
      window.document.title = '绑定邮箱';
    }
  }
</script>

<style scoped>
  :-moz-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }

  ::-moz-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }

  input:-ms-input-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }

  input::-webkit-input-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }
</style>
